<template>
    <div class="box">
        <div class="main">
            <!-- 头部信息的展示 -->
            <div class="head">
                <div class="head-left">
                    <el-upload action="/api/common/user/upload"
                        accept=".jpg,.png" :show-file-list="false"
                        :headers="headers"
                        :on-success="uploadSuccess"
                        :before-upload="beforeAvatarUpload">
                        <el-avatar shape="square" class="el-dropdown-avatar" :size="100" :src="form.imagePath"></el-avatar>
                    </el-upload>
                    <p class="p-text p-name">{{ form.username}}(账号:{{form.account}})</p>
                    <p class="p-text">班级：{{ formatClasses(form.classesId)}}</p>
                    <p class="p-text">邮箱：{{ form.userEmail }}</p>
                </div>
            </div>
            <el-card class="box-card">
                <el-tabs type="border-card" style="height: 100%;">
                    <el-tab-pane label="详细信息">
                        <el-form label-width="120px" ref="form" :model="form" :inline="true" :rules="rules">
                            <el-form-item label="姓名：" required prop="username" class="form-item">
                                <el-input v-model="form.username" placeholder="输入姓名" clearable></el-input>
                            </el-form-item>
                            <el-form-item  label="性别：" prop="sex" class="form-item">
                                <el-select v-model="form.sex" placeholder="性别" clearable>
                                    <el-option v-for="item in sexEnum" :key="item.key" :value="item.key"
                                                :label="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="邮箱：" prop="userEmail" class="form-item" >
                                <el-input type="email" v-model="form.userEmail" placeholder="请输入邮箱" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="生日：" prop="birthDay" class="form-item">
                                <el-date-picker v-model="form.birthDay" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" clearable/>
                            </el-form-item>
                            <!-- <el-form-item required  label="年级：" prop="sex" class="form-item" >
                                <el-select v-model="form.userLevel" placeholder="年级" clearable @change="change()">
                                    <el-option v-for="item in subjectEnum" :key="item.key" :value="item.key"
                                                :label="item.value"></el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item required  label="班级" prop="classesId" class="form-item" >
                                <el-select v-model="form.classesId" placeholder="请选择班级" remote reserve-keyword filterable 
                                    clearable>
                                    <el-option v-for="item in classesItems" :key="item.id" :value="item.id"
                                                :label="item.classesName"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item class="form-item">
                                <el-button type="primary" @click="submitForm" style="width: 100px; height: 40px;">修改</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="更改密码">
                        <el-form label-width="120px" ref="passForm" :model="passForm" :rules="rules">
                            <el-form-item label="旧密码：" required prop="oldPass" class="form-item">
                                <el-input type="password" v-model="passForm.oldPass" placeholder="请输入旧密码"></el-input>
                            </el-form-item>
                            <el-form-item  label="新密码：" required prop="newPass" class="form-item">
                                <el-input type="password" v-model="passForm.newPass" placeholder="请输入新密码"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码：" required prop="aginPass" class="form-item">
                                <el-input type="password" v-model="passForm.aginPass" placeholder="请确认新密码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="updatePass" style="width: 60px; height: 30px;">修改</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script>
import { getCurrent ,updateSelf,updatePass} from '@/api/user/user'
import {classesList} from '@/api/classes/classes'
import { mapGetters } from 'vuex';
export default {
    name:'Profile',
    data(){
        const validAginPass = (rule,val,callback) =>{
            if(val !== this.passForm.newPass){
                callback(new Error("请保证两次密码输入一至"));
            }else if(val === ''){
                callback(new Error("请输入"));
            }else{
                callback()
            }
        }
        return{
            form:{
                username: '',
                account: '',
                sex: null,
                birthDay: '',
                userEmail: '',
                userLevel: 1,
                imagePath:'',
                classesId:null
            },
            //班级的集合
            classesItems:[],
            passForm:{
                oldPass: '',
                aginPass:'',
                newPass: ''
            },
            sexEnum:[
                { key:0,value:'男'},
                { key:1,value:'女'}
            ],
            subjectEnum:[
                {
                    key : 1,
                    value: '大一',
                },
                {
                    key : 2,
                    value: '大二',
                },
                {
                    key : 3,
                    value: '大三',
                },
                {
                    key : 4,
                    value: '大四',
                },
            ],
            rules: {
                oldPass : [
                { required: true, message:'请输入原密码', trigger: 'blur' }
                ],
                newPass: [
                { required: true,  message:'请输入新密码', trigger: 'blur' }
                ],
                aginPass: [
                { required: true,  validator: validAginPass, trigger: 'blur' }
                ],
                username:[
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ]
            },
        }
    },
    mounted(){
        getCurrent().then(resp=>{
            if(resp.code == 200){
                this.form = resp.data;
                this.getClassesList('_');
            }
        }).catch(error =>{

        });
        console.log(this.form.majorId);
    },
    methods:{
        async getClassesList(val){
            let res = await classesList(val);
            this.classesItems = res.data;
            this.classesItems.push({id:0,classesName:'请选择班级'})
        },
        //修改头像
        uploadSuccess (re, file) {
            this.$message.success(re.message)
            this.form.imagePath = re.data;
            this.$store.dispatch('user/setAvatar',re.data)
        },
        beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
    },   
        // 修改密码
        updatePass(){
            this.$refs.passForm.validate(valid => {
                if(valid){
                    updatePass(this.passForm).then(resp =>{
                        if(resp.code == 200){
                            this.$message.success(resp.message)
                        }else{
                            this.$message.error(resp.message)
                        }
                    })
                }
            })
        },
        // 修改用户信息
        submitForm(){
            console.log(this.form);
            updateSelf(this.form).then(resp=>{
                if(resp.code == 200){
                    this.$message.success('修改成功')
                }
            }).catch(error=>{
                this.$message.error('请检查网络连接情况')
            })
        },
        // 格式年级
        formatClasses(val){
            let name = '';
            this.classesItems.forEach(el =>{
                if(el.id == val){
                    name = el.classesName;
                    return
                }
            })
            return name;
        },
        // formatMajor(val){
        //     let name ='';
        //     this.majorItems.forEach(el =>{
        //         if(el.value ==val){
        //             name = el.name;
        //             return;
        //         }
        //     })
        //     return name;
        // },
        change(){
            // this.majorItems = [];
            // majorList(this.form.userLevel).then(resp=>{
            //     this.majorItems = resp.data;
            //     this.form.majorId = this.majorItems[0].value;
            // })
            // console.log(this.form.majorId);
        }
    },
    computed:{
        ...mapGetters([
            'token',
            'imageUrl'
        ]),
        headers(){
            return {
                "token":this.token,
            }
        }
    }
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #409Eff;
    }
    .form-item{
        width: 400px;
        margin: 25px 0px;
    }
    .box{
        width: 85%;
        height: 630px;
        margin:0px auto ;
        border-top: rgb(241, 234, 234) 1px solid;
        background: rgb(241, 237, 237);
    }
    .main{
        width: 95%;
        height: 600px;
        background: rgb(249, 247, 247);
        margin: 15px auto;
        border: 1px white solid;
    }
    .box-card{
        height: 500px;
    }
    .p-text{
        color: white;
        text-align: left;
        margin: 5px 0px 3px 220px;
    }
    .p-name{
        font-weight: bold;
        margin-top: -5px;
    }
    .head{
        height: 100px;
        width: 100%;
        background-image:  url('@/assets/img/5.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .head-left{
        width: 50%;
        height: 100%;
        position: relative;
    }
    .el-dropdown-avatar{
        position: absolute;
        top: 12px;
        left: 90px;
    }

</style>